<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/static/element/index.css}"/>
</head>
<body>
<div id="app">
    <template>
        <el-form :model="pwdForm" ref="pwdForm" :rules="pwdFormRules" label-width="80px">
            <el-form-item label="旧密码" prop="oldPwd">
                <el-input v-model="pwdForm.oldPwd"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPwd">
                <el-input v-model="pwdForm.newPwd"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPwd">
                <el-input v-model="pwdForm.confirmPwd"></el-input>
            </el-form-item>
            <div style="text-align: center;margin-right: 100px">
                <el-form-item style="">
                    <el-button @click="cancel">取 消</el-button>
                    <el-button type="primary" @click="pwdFormSubmit">确 定</el-button>
                </el-form-item>
            </div>

        </el-form>
    </template>
</div>
</body>

<script th:src="@{/static/js/axios.min.js}"></script>
<script th:src="@{/static/js/request.js}"></script>
<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/api/user.js}"></script>
<script th:src="@{/static/api/login.js}"></script>
<script th:src="@{/static/js/vue.min.js}"></script>
<script th:src="@{/static/element/index.js}"></script>
<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/layer/layer.js}"></script>


<script>

    new Vue({
        el: '#app',
        data() {
            return {

                pwdForm: {
                    oldPwd: '',
                    newPwd: '',
                    confirmPwd: ''
                },
                uploadData: {'module': '1'},
                pwdFormRules: {
                    oldPwd: [
                        {required: true, message: '请输入', trigger: 'blur'},
                        {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                    ],
                    newPwd: [
                        {required: true, message: '请输入', trigger: 'blur'},
                        {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                    ],
                    confirmPwd: [
                        {required: true, message: '请输入', trigger: 'blur'},
                        {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                    ]
                },
            }
        },
        created() {

        },
        methods: {
            pwdFormSubmit() {
                this.$refs.pwdForm.validate((valid) => {
                    if (valid) {
                        let param = this.pwdForm;
                        requests.post('/updatePwd', JSON.parse(JSON.stringify(param)))
                            .then((res) => {
                                if (res.code === '200') {
                                    parent.layer.msg('修改成功');
                                    this.cancel()
                                }
                            });
                    } else {
                        return false;
                    }
                });
            },
            cancel() {
                let index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            },

        }
    });
</script>
<style>
</style>
</html>
